<script>
import textbox from './components/textbox.vue';
import upLoadVideo from './components/upLoadVideo.vue';
import EleUploadVideo from '../lib/EleUploadVideo.vue';
import CropTool from './components/CropTool.vue';
import axios from "axios";
// import imgSrc from '../public/login.jpg';
// import { ref } from 'vue';
export default{
    components:{
    textbox:textbox,
    upLoadVideo:upLoadVideo,
    EleUploadVideo:EleUploadVideo,
    CropTool:CropTool,
  },
  data(){
    return{
      videoUrl: 'https://fengma1992.github.io/media-cut-tool/video.mp4',
      localVideoUrl:'',
      duration: 0,
      playing: false,
      currentTime: 0,
      imgSrc: '../public/login.jpg',
      name:'leo',
      value:'abc'
    }
  },
  mounted () {
    const videoElement = this.$refs.video
    videoElement.ondurationchange = () => {
    this.duration = videoElement.duration
    }
    videoElement.onplaying = () => {
      this.playing = true
    }
    videoElement.onpause = () => {
      this.playing = false
    }
    videoElement.ontimeupdate = () => {
      this.currentTime = videoElement.currentTime
    }
  },
  methods: {
    seekVideo (seekTime) {
      this.$refs.video.currentTime = seekTime
    },
    playVideo (time) {
      this.seekVideo(time)
      this.$refs.video.play()
    },
    pauseVideo () {
      this.$refs.video.pause()
    },
    stopVideo () {
      this.$refs.video.pause()
      this.$refs.video.currentTime = 0
    },
    localVideoPlay(){
      this.videoUrl = "http://127.0.0.1:8887/"+this.localVideoUrl
    },
    getRes(){
        // TODO 提交表单
        const path = '/mypath'
          axios.get(path,{
            name:"111",
            value:"222"
          }).then(response=>{
            if (response.data.status === 'success'){
              console.log(response.data.status);
            }else{
              console.log('error in GET')
            }
            this.name = response.data.name; // update the value of 'name'
            this.value = response.data.value; // update the value of 'value'
          }).catch(err =>{
            console.log(err);
          });
    }
  },
}

</script>

<template>
  <div class="background">
    <!-- <img :src="imgSrc" alt="背景图" width="100%" height="100%"/> -->
    <div>
      <h1 class="head">欢迎使用标注界面</h1>
      <upLoadVideo></upLoadVideo>
      <p>{{ name }} {{ value }}</p>
      <button @click="getRes">get</button>
      <div id="app">
          <div class="input-container">
              <span>网络视频链接：</span>
              <input type="text" v-model="videoUrl"/>
              <br>
              <span>本地视频名字: </span>
              <input type="text" v-model="localVideoUrl"/>
              <button @click="localVideoPlay">确定</button>
          </div>
          <!-- <h2>这里应该显示video</h2> -->
          <video ref="video" :src="videoUrl" controls width="800">你的浏览器不支持这个格式的video</video>
          <!-- <h2>这里应该结束显示video</h2> -->

          <CropTool :duration="duration"
                    :playing="playing"
                    :currentPlayingTime="currentTime"
                    @play="playVideo"
                    @pause="pauseVideo"
                    @stop="stopVideo"/>
      </div>
      <!-- <video width="500" controls autoplay>
              <source src="http://127.0.0.1:8887/oceans.mp4" type="video/mp4">
      </video> -->
      <textbox></textbox>
    </div>
  </div>
</template>

<style lang="scss">
@import './index.scss';
.background{
  // width:100%;
  // height:100%;
  // z-index: -1;
  // position:absolute;
  background-image: url(../public/OIP.jfif);
  background-size: cover;
  background-attachment:fixed;
  background-position: center;
  box-sizing: border-box;
  width:100%;
  height:100%;
}
.head{
  font-size:300%;
  font-weight: bolder;
  font-style: italic;
  font-style: initial;
}
.content{
  // z-index: 1;
  // position: absolute;
}
</style>
